<template>
  <div>
    <el-table :data="list" :loading="loading" class="mt20" style="width: 100%">
      <el-table-column label="姓名" prop="cardName" width="160px"></el-table-column>
      <el-table-column label="添加者" prop="creator" width="100px"></el-table-column>
      <el-table-column label="卡号" prop="cardNumber" width="160px"></el-table-column>
      <el-table-column label="有效期" prop="date" width="300px">
        <template #default="{ row }">
          {{ parseTime(row.startDateTime) }} ~ {{ parseTime(row.endDateTime) }}
        </template>
      </el-table-column>
      <el-table-column label="添加时间" prop="createTime" width="160px">
        <template #default="{ row }">{{ parseTime(row.createTime) }}</template>
      </el-table-column>
      <el-table-column label="状态" prop="electricQuantityUpdateDate" width="100px">
        <template #default="{ row }">
          <span>{{ row.status }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="300px">
        <template #default="{ row }">
          <div class="flex-row-center">
            <el-button link type="primary" @click="handleSendMsg(row)">短信通知</el-button>
            <el-button link type="primary">修改有效期</el-button>
            <el-button link type="primary" @click="handleRemove(row)">删除</el-button>
            <el-button link type="primary" @click="handleRecord(row)">操作记录</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <SendPassword
      type="message"
      :visible="messageVisible"
      @cancel="() => messageVisible = false"
      @ok="handleSendMessageOk"
    />
  </div>
</template>
<script setup name="KeyPane">
import { useRouter } from 'vue-router'
import SendPassword from '@/components/SendPassword'

const { proxy } = getCurrentInstance()
const router = useRouter()

const loading = ref(false)
const total = ref(0)
const list = ref([])
const sendKeyVisible = ref(false)
const messageVisible = ref(false)
const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10,
  },
})
const { queryParams } = toRefs(data)


const props = defineProps({
  lockId: String
})

/* 删除密码 */
function handleRemove() {
  proxy.$modal.confirm("确定删除密码？").then(() => {
    console.log('删除');
  }).catch(() => {
    console.log('cancel');
  })
}

/* 使用记录 */
function handleRecord() {
  router.push({ path: '/deviceManagement/smartLock/record' })
}

/* 短信通知 */
function handleSendMsg() {
  messageVisible.value = true
}

function handleSendMessageOk() {
  messageVisible.value = false
}

function getList() {
  list.value = [{
    cardName: '黄文勇',
    cardNumber: '15880500666',
    creator: '公司管理员',
    createTime: '2024-04-22 12:34:12',
    status: '1',
    startDateTime: '2024-04-22 12:34',
    endDateTime: '2025-04-22 12:34',
  }]
  total.value = 1
}
getList()
</script>
